<script setup>
import router from '@/router';

//点击标签跳转规则
const changePage = (tab)=>{
    switch(tab) {  
    case '0':  
        router.push('/main/planeTrain');
        break;  
    case '1':  
        router.push('/main/planeExperince');
        break;  
    case '2':  
        router.push('/main/planeSkydiving');
        break;
    case '3':  
        router.push('/main/planeCharter');
    break;
          
}
}



</script>

<template>
    <div class="PlaneTrain">

        <!-- 宣传图 -->
        <img src="~@/assets/banner-planeTrain.jpg" alt="">
        <el-tabs @tab-change="changePage" type="border-card">
            <el-tab-pane aria-selected="true" label="飞行培训">
                <el-container class="content part1">
                    <el-aside width="45%">
                        <h1>运动类飞行执照</h1>
                        <p>持有汽车驾照可免体检</p>
                        <p>教员考核可替代考试</p>
                        <p>可驾驶总重不超1.2吨,座位不超4座的20多种飞机</p>
                    </el-aside>
                    <el-main><img class="content-pic" src="~@/assets/aruola.jpg" alt=""></el-main>
                </el-container>

                <el-container class="content part2">
                    <el-main><img class="content-pic" src="~@/assets/sr20.jpg" alt=""></el-main>
                    <el-aside width="45%">
                        <h1>固定翼私用驾驶员</h1>
                        <p>按民航II类体检标准体检</p>
                        <p>可驾驶总重不超5.7吨的各种飞机</p>
                        <p>后续可通过改机型训练，理论上不受机型限制</p>
                    </el-aside>
                </el-container>

                <el-container class="content part3">
                    <el-aside width="45%">
                        <h1>直升机私用驾驶员</h1>
                        <p>按民航II类体检标准体检</p>
                        <p>可驾驶总重不超3.18吨的各种直升机</p>
                        <p>后续可通过改机型训练，理论上不受机型限制</p>
                    </el-aside>
                    <el-main><img class="content-pic" src="~@/assets/r44.jpg" alt=""></el-main>
                </el-container>





            </el-tab-pane>
            <el-tab-pane label="飞行体验">Config</el-tab-pane>
            <el-tab-pane label="跳伞飞行">Role</el-tab-pane>
            <el-tab-pane label="包机飞行">Task</el-tab-pane>
        </el-tabs>

    </div>

</template>

<style lang="less">
.PlaneTrain {
    margin: 0 auto;
    img {
        width: 100%;
        height: 700px;
    }
    .el-tabs {
        width: 100%;
        margin: 0;
        border: none;

        .el-container {
            width: 100%;
            height: 550px;
            padding: 50px;
            margin-bottom: 65px;
        }

        .content-pic {
            width: 100%;
            height: 100%;
            vertical-align: middle;
        }

        .el-tabs__header {
            background-color: #333;

        }

        .el-tabs__item {
            height: 55px;
            line-height: 55px;
            font-size: 16px;
        }

        /* 选项卡选中时样式 */
        .el-tabs__item.is-active {
            color: #fff;
            background-color: #cc0000;
            height: 50px;
            border: 2px solid #cc0000;
        }

        .el-aside {
            padding: 50px;

            h1 {
                font-size: 35px;
                margin-top: 100px;
                margin-bottom: 40px;
            }

            p {
                font-size: 20px;
                margin-bottom: 10px;
            }
        }

        .content:hover .el-aside h1 {
            color: #cc0000;
            /* 鼠标悬停时的颜色 */
        }
    }







}
</style>